<template>
  <el-dialog
    title="基本信息"
    width="60%"
    :style="{ height: '700px' }"
    v-model="props.dialogVisible1"
  >
    <span :style="{ marginLeft: '80px' }">车站</span>&emsp;
    <el-select v-model="value" class="m-2" placeholder="全部" size="default">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span :style="{ marginLeft: '80px' }">车次</span>&emsp;<el-input
      v-model="input"
      placeholder="请输入车次"
      :style="{ width: '150px' }"
      @change="addChange"
    />
    <span :style="{ marginLeft: '80px' }">车长</span>&emsp;<el-input
      v-model="input"
      placeholder="请输入姓名"
      :style="{ width: '150px' }"
      @change="addChange"
    />
    <div :style="{ fontSize: '16px', marginTop: '20px' }">
      <span :style="{ marginLeft: '20px' }">席位总数586</span
      ><span :style="{ marginLeft: '40px' }">车厢总数8</span
      ><span :style="{ marginLeft: '40px' }">限乘人数646</span
      ><span :style="{ marginLeft: '40px' }">无座人数60</span>
    </div>
    <div :style="{ width: '100%', marginTop: '20px' }">
      <el-table
        :data="dataList"
        stripe
        :style="{ width: '100%' }"
        :border="true"
        header-cell-class-name="tabless"
      >
        <el-table-column prop="type" label="席位类别" />
        <el-table-column prop="count" label="车厢数" align="center">
          <template #default="scope">
            <el-input-number v-model="scope.row.count" :max="10" />
          </template>
        </el-table-column>
        <el-table-column prop="rows" label="每车排数" align="center">
          <template #default="scope">
            <el-input-number v-model="scope.row.rows" :max="10" />
          </template>
        </el-table-column>
        <el-table-column prop="posizition" label="每车席位" align="center" />
        <el-table-column prop="limitPeople" label="每车限乘人数" align="center">
          <template #default="scope">
            <el-input-number v-model="scope.row.limitPeople" :max="10" />
          </template>
        </el-table-column>
        <el-table-column prop="noneSeat" label="每车无座数" align="center">
          <template #default="scope">
            <span>{{ scope.row.noneSeat > 0 ? scope.row.noneSeat : "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close1">返回</el-button>
        <el-button type="primary" @click="confirm1"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, toRefs, defineEmits } from "vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  dialogVisible1: Boolean,
});
const value = ref("");
const dataList = ref([
  {
    type: "商务座",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 10,
  },
  {
    type: "一等座",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 0,
  },
  {
    type: "二等座",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 10,
  },
  {
    type: "软卧",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 0,
  },
  {
    type: "硬卧",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 0,
  },
  {
    type: "硬座",
    count: 1,
    rows: 1,
    posizition: 24,
    limitPeople: 17,
    noneSeat: 10,
  },
]);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
const input = ref("");
let { dialogVisible1 } = toRefs(props);
const emits = defineEmits(["closeTan1", "confirm2"]);
const close1 = () => {
  dialogVisible1 = false;
  emits("closeTan1", dialogVisible1);
};
const confirm1 = () => {
  dialogVisible1 = false;
  emits("confirm2", dialogVisible1);
};
const addChange = () => {
  console.log(input.value);
};
</script>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.tabless {
  background: rgb(215, 219, 226) !important;
  color: #000;
}
</style>
